<template>
	<view class="main">
		<header-vue :back="true" :title="title"></header-vue>
		<view class="list">
			<view class="white-box">
				<view class="flex start font30 fontbold-500">
					<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
					<view>基础信息</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view>性别</view>
					<view class="radio-flex" >
						<view  class="radio-flex"  v-for="(item, index) in list">
							
							<view class="font28" style="margin-right: 10rpx;" :class="{'active': gender == index }"   @click=" gender = index ">
								<view class="radio">
									<i class="iconfont icon-duihao" v-if = "gender == index"></i>
								</view>
							</view>
							<view>{{item.name}}</view>
						</view>
					</view>
					
				</view>
				
				<view class="flex between form-item font28" style="border: 0;">
					<view>姓名</view>
					<input class="font28" placeholder="请输入姓名" />
				</view>
				
				<view class="flex between form-item font28">
					<view>手机号码</view>
					<input class="font28" placeholder="请输入手机号码" />
				</view>
				<view class="flex between form-item font28">
					<view>所在地区</view>
					<input class="font28" placeholder="请选择所在地区" />
				</view>
				<view class="flex between form-item font28">
					<view>接单社区</view>
					<input class="font28" placeholder="请选择接单社区" />
				</view>
				<view class="flex between form-item font28">
					<view>服务类别</view>
					<input class="font28" placeholder="请选择服务类别" />
				</view>
				<view class="flex between form-item font28">
					<view>入住店铺</view>
					<input class="font28" placeholder="请选择入住店铺" />
				</view>
				<view class="flex between form-item font28">
					<view>从业时间</view>
					<input class="font28" placeholder="请填写工作经验(例:10年)" />
				</view>
			</view>
			<view class="white-box" style="background: #fff;padding-bottom: 28rpx;">
				<view class="flex start font30 fontbold-500">
					<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
					<view class="text-color font30 font-blod">技术证书</view>
				</view>
				<view class="flex column upload-img">
					<i class="iconfont icon-camera"></i>
					<view class="font24 text-666666 pt-14rpx">上传照片</view>
				</view>
			</view>
		</view>
		<view class="flex center fixed">
			<view class="flex btn-buy" @click="goPage()">确定</view>
		</view>
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
	import numBoxVue from '../../views/shop/components/numBox.vue'
	import {
		searchApi
	} from '../../api/modules/shop'
	import appConfig from '@/config/app.js'

	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				title: '',
				params: {
					keyword: ''
				},
				gender: 0,
				value: '',
				showModal: false,
				list:[{name: '男',},{name: '女',}]
			}
		},
		components: {
			headerVue,
			numBoxVue,
		},
		mounted() {},
		onLoad(options) {
			this.title = options.name == 0 ? '技工入驻' : '邻工入驻'
		},
		methods: {
			goPage() {
				uni.navigateTo({
					url:'/views/mine/authentication'
				});
			},
			
		}
		
	}
</script>
<style lang="scss" scoped>
	@import url("/common/public.scss");
	.main {
		background: #F6F6F6;
		height: 100vh;
	}

	.list {
		padding: 0 32rpx 100rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	.white-box {
		min-height: 200rpx;
		background: linear-gradient(180deg, #F5FBFF 0%, #FFFFFF 12%);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		padding: 40rpx 28rpx 0;
		box-sizing: border-box;
		margin-top: 28rpx;

		.title-icon {
			width: 32rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		.store-title {
			padding-bottom: 28rpx;
		}

		.iconfont {
			margin-right: 4rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

	}

	.form-item {
		height: 118rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #DDDDDD;

		.icon-jiantou {
			margin-left: 8rpx;
			margin-right: 0;
		}

		.flex {
			width: 400rpx;
		}

		input {
			text-align: right;

			::v-deep .input-placeholder {
				color: #AAAAAA;
			}
		}
	}

	.upload-img {
		width: 140rpx;
		height: 160rpx;
		background: #F8F8F8;
		border-radius: 4rpx;
		margin-top: 40rpx;
	}

	.fixed {
		position: fixed;
		width: 100%;
		z-index: 3;
		min-height: 88rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		bottom: env(safe-area-inset-bottom);

		.btn-buy,
		.btn-join {
			padding: 0 26rpx;
			height: 80rpx;
			border-radius: 60rpx;
			color: $uni-text-color-inverse;
			width: 100%;
			box-sizing: border-box;
		}
		
		.btn-buy {
			background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
		}

		.btn-join {
			margin-right: 20rpx;
			background: linear-gradient(90deg, #DF9824 0%, #F4B042 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(223, 152, 36, 0.1);
		}

		
	}
	.radio-flex {
		display: flex;
		align-items: center;
		justify-content: end;
		margin-left: 36rpx;
		
		.radio {
			width: 26rpx;
			height: 26rpx;
			border-radius: 50%;
			border: 1rpx solid $uni-color-primary;
			margin-right: 8rpx;
			line-height: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		
		.active {
			color: $uni-text-color;
		
			.radio {
				background: $uni-color-primary;
				color: $uni-text-color-inverse;
			}
		}
	}
	.text-color{
		color:#222222;
		font-weight: bold;
	}
	// #ifdef MP
	// .fixed{
	// 	bottom:0;
	// }
		
	// #endif
</style>